<script setup lang="ts">
import { icon } from '@/util/icons'
import { ref } from 'vue'
const emit = defineEmits<{
  (e: 'selectIcon', name: string): void
}>()

/* 选择图标 */
function selectIcon(name: string) {
  // 触发选择事件
  emit('selectIcon', name)
}

// 图标搜索
const searchInput = ref<string>('')
function searchIcon(name: string) {
  return name.search(RegExp(searchInput.value, 'i')) >= 0
}
</script>
<template>
  <div class="icon-select-root">
    <el-input v-model="searchInput"></el-input>
    <el-scrollbar height="260px">
      <div class="icon-box">
        <span
          @click="selectIcon(i.name)"
          v-show="searchIcon(i.name)"
          v-for="i in icon"
          class="icon"
        >
          <el-icon>
            <component :is="i"></component>
          </el-icon>
        </span>
      </div>
    </el-scrollbar>
  </div>
</template>
<style scoped lang="less">
.icon-select-root {
  .el-icon {
    font-size: 20px;
  }
  .icon-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .icon {
    border: 1px gainsboro solid;
    width: 40px;
    height: 40px;
    margin: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
  }
  .icon:hover {
    background: gainsboro;
  }
}
</style>
@/util/icons
